{extend name='public/base' /}

{block name="content"}
<style type="text/css">
	html {
		background-color: #fff !important;
	}

	.yes {
		color: #ffffff;
		font-size: 14px;
		background-color: #2d8cf0;
		padding: 3px;
		width: 60px;
		border-radius: 5px;
		text-align: center;
		line-height: 24px;
		display: inline-block;
		float: left;
		margin: 20px 0 20px 0;
	}

	.no {
		color: #ffffff;
		font-size: 14px;
		background-color: #2d8cf0;
		padding: 3px;
		width: 60px;
		border-radius: 5px;
		text-align: center;
		line-height: 24px;
		display: inline-block;
		float: right;
		margin: 20px 0 20px 0;
	}
</style>

<div style="width: 100%;line-height: 50px;font-weight: 600;">施工证人员添加 </div>
<form>
	<div style="margin: 10px 0 20px 0;">
		<span style="display: inline-block;width: 80px;">*姓名： </span>
		<input type="text" name="name" id="username" placeholder="请输入办理用户姓名"
			style="outline:none;outline: none; height: 26px;width: 240px;border-radius: 8px;border: 0.5px #ccc solid;" />
	</div>
	<div style="margin: 6px 0 6px 0;">
		<span style="display: inline-block;width: 80px;">*手机号：</span>
		<input type="text" name="phone" id="mobile" placeholder="请输入手机号"
			style="outline:none; outline: none; height: 26px;width: 240px;border-radius: 8px;border: 0.5px #ccc solid;" />
	</div>
	<div style="margin: 30px 0 6px 0;">
		<span style="display: inline-block;width: 120px;">*身份证正面：</span>
		<div style="width: 180px;height: 130px;border-radius: 5px;border: 0.5px #ccc solid;display: inline-block;"
			id="image1"><span style="line-height: 124px;margin: 0 0 0 60px;color: #ccc;font-size: 12px;">+点击添加</span>
		</div>
		<span style="display: inline-block;width: 120px;">*身份证反面：</span>
		<div style="width: 180px;height: 130px;border-radius: 5px;border: 0.5px #ccc solid;display: inline-block;"
			id="image2"><span style="line-height: 124px;margin: 0 0 0 60px;color: #ccc;font-size: 12px;">+点击添加</span>
		</div>
	</div>
	{if condition="$info.other_certificate"}
	<div id="is_card">
		<div style="margin: 20px 0 6px 0;">
			<span style="display: inline-block;width: 120px;">其他证件上传：</span>
			<div style="width: 180px;height: 130px;border-radius: 5px;border: 0.5px #ccc solid;display: inline-block;"
				id="image3">
				<span style="line-height: 124px;margin: 0 0 0 60px;color: #ccc;font-size: 12px;">+点击添加</span>
			</div>
		</div>
	</div>
	{/if}
	<div style="width: 210px;margin: 0 0 0 194px;"> <span class="yes" lay-submit lay-filter="refund">确认</span>
		<span class="no" lay-filter="exit" lay-submit>取消</span>
	</div>
</form>

{/block}


{block name="js"}
<!--js处理区-->
<script>
	layui.use(['element', 'table', 'form', 'jquery', 'lucky', 'opTable', 'layer', 'upload'], function() {
		var element = layui.element;
		var form = layui.form;
		var table = layui.table;
		var $ = layui.jquery;
		var lucky = layui.lucky;
		var opTable = layui.opTable;
		var layer = layui.layer;
		var upload = layui.upload;
		form.render();
		var id_card_positive = ''
		var id_card_negativ = ''
		var other_certificate = ''


		upload.render({
			elem: '#image1',
			url: "{:url('common/UpImg')}" //图片上传地址
				,
			accept: 'images' //
				,
			acceptMime: 'image/*',
			size: 1024 * 12,
			before: function(res) {
				loading = layer.load(2, {
					shade: [0.2, '#000'] //0.2透明度的白色背景
				});
			},
			done: function(data) {
				var image1 = document.getElementById('image1')
				image1.innerHTML = ` <img id="img1" src="" style="width: 100%; height: 100%;" >`
				layer.close(loading);
				if (data.code == 1) {
					console.log(data)
					id_card_positive = data.data.thumb_path
					$("#img1").attr("src", data.data.thumb_path);
					layer.msg('图片上传成功', {
						icon: 1,
						time: 1000
					});
				} else {
					layer.msg(data.msg, {
						icon: 5,
						time: 1000
					});
				}
			},
			error: function(red) {
				layer.close(loading);
				layer.msg("网络错误", {
					icon: 5,
					time: 1500
				});
			}
		});
		upload.render({
			elem: '#image2',
			url: "{:url('common/UpImg')}" //图片上传地址
				,
			accept: 'images' //
				,
			acceptMime: 'image/*',
			size: 1024 * 12,
			before: function(res) {
				loading = layer.load(2, {
					shade: [0.2, '#000'] //0.2透明度的白色背景
				});
			},
			done: function(data) {
				var image2 = document.getElementById('image2')
				image2.innerHTML = ` <img id="img2" src="" style="width: 100%; height: 100%;" >`
				layer.close(loading);
				if (data.code == 1) {
					console.log(data)
					id_card_negativ = data.data.thumb_path
					$("#img2").attr("src", data.data.thumb_path);
					layer.msg('图片上传成功', {
						icon: 1,
						time: 1000
					});
				} else {
					layer.msg(data.msg, {
						icon: 5,
						time: 1000
					});
				}
			},
			error: function(red) {
				layer.close(loading);
				layer.msg("网络错误", {
					icon: 5,
					time: 1500
				});
			}
		});
		upload.render({
			elem: '#image3',
			url: "{:url('common/UpImg')}" //图片上传地址
				,
			accept: 'images' //
				,
			acceptMime: 'image/*',
			size: 1024 * 12,
			before: function(res) {
				loading = layer.load(2, {
					shade: [0.2, '#000'] //0.2透明度的白色背景
				});
			},
			done: function(data) {
				var image3 = document.getElementById('image3')
				image3.innerHTML = ` <img id="img3" src="" style="width: 100%; height: 100%;" >`
				layer.close(loading);
				if (data.code == 1) {
					console.log(data)
					other_certificate = data.data.thumb_path
					$("#img3").attr("src", data.data.thumb_path);
					layer.msg('图片上传成功', {
						icon: 1,
						time: 1000
					});
				} else {
					layer.msg(data.msg, {
						icon: 5,
						time: 1000
					});
				}
			},
			error: function(red) {
				layer.close(loading);
				layer.msg("网络错误", {
					icon: 5,
					time: 1500
				});
			}
		});

		function costtype(datas) {
			$.ajax({
				url: "{:url('getCostType')}",
				type: "post",
				data: datas,
				dataType: "json",
				success: function(data) {
					if (data.code == 0) {
						var param = data.data
						$("#real_amount").val(param.z_money);
						student_table.reload({
							data: param.data
						});
						if (param.is_card == 1) {
							$('#id_card').css('display', 'block')
						} else {
							$('#id_card').css('display', 'none')
						}
					} else {
						layer.msg(data.msg, {
							icon: 15,
							time: 1000,
							shade: 0.3
						});
						student_table.reload({
							data: []
						});
					}
				}
			});
		}

		form.on('submit(exit)', function(obj) {
			console.log('进来了3')
			var index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
		});
		form.on('submit(refund)', function(data) {
			console.log('进来了2', data)
			var id = "{$id}"
			var username = document.getElementById('username').value
			var mobile = document.getElementById('mobile').value
			if (!username) {
				layer.msg("请填写名称", {
					icon: 5,
					time: 1500
				});
			} else if (!mobile) {
				layer.msg("请填写手机号", {
					icon: 5,
					time: 1500
				});
			} else {
				$.ajax({
					url: "{:url('staff')}",
					type: "post",
					data: {
						id_card_positive: id_card_positive,
						id_card_negativ: id_card_negativ,
						other_certificate: other_certificate,
						username: username,
						mobile: mobile,
						id: id
					},
					dataType: "json",
					success: function(data) {
						console.log('code=>', data.code)
						if (data.code == 1) {
							layer.msg(data.msg, {
								icon: 5,
								time: 2000
							});
						} else {
							layer.msg("添加成功", {
								icon: 1,
								time: 2000
							});
							setTimeout(() => {
								parent.location.reload();
								var index = parent.layer.getFrameIndex(window.name);
								parent.layer.close(index);
							}, 2000)
						}
					}
				});
			}
		});



		/**
		 * 监听单行工具操作
		 */
	});
</script>
{/block}
